<template>
  <div class="home">
    <!-- banner图片 -->
    <div class="background-media">
      <div class="banner">
        <div class="bgImg">
          <div class="bgTitle">
            <h1>{{ pageInfo.short.title }}</h1>
            <h3>{{ pageInfo.short.body }}</h3>
          </div>
        </div>
        <div class="mySwiper">
          <div ref="bigswiper" class="swiper-container">
            <div class="swiper-wrapper">
              <div class="swiper-slide" v-for="(item, index) in pageInfo.technology">
                <img :src="item.imageUrl">
                <p>{{ item.body }}</p>
                <h3>{{ item.title }}</h3>
              </div>
            </div>
          </div>
          <div class="swiper-button-prev">&lt;</div>
          <div class="swiper-button-next">&gt;</div>
        </div>
      </div>

    </div>
    <!-- 个人简介 -->
    <div class="mySnapshot">
      <div class="w">
        <h4>个人简介</h4>
        <p>{{ pageInfo.intro }}</p>
        <div class="contact">
          联系方式:
          <span role="img" aria-label="wechat" class="anticon anticon-wechat"
            style="font-size: 30px; color: rgb(138, 208, 65); margin:0 20px;"><svg viewBox="64 64 896 896"
              focusable="false" data-icon="wechat" width="1em" height="1em" fill="currentColor" aria-hidden="true">
              <path
                d="M690.1 377.4c5.9 0 11.8.2 17.6.5-24.4-128.7-158.3-227.1-319.9-227.1C209 150.8 64 271.4 64 420.2c0 81.1 43.6 154.2 111.9 203.6a21.5 21.5 0 019.1 17.6c0 2.4-.5 4.6-1.1 6.9-5.5 20.3-14.2 52.8-14.6 54.3-.7 2.6-1.7 5.2-1.7 7.9 0 5.9 4.8 10.8 10.8 10.8 2.3 0 4.2-.9 6.2-2l70.9-40.9c5.3-3.1 11-5 17.2-5 3.2 0 6.4.5 9.5 1.4 33.1 9.5 68.8 14.8 105.7 14.8 6 0 11.9-.1 17.8-.4-7.1-21-10.9-43.1-10.9-66 0-135.8 132.2-245.8 295.3-245.8zm-194.3-86.5c23.8 0 43.2 19.3 43.2 43.1s-19.3 43.1-43.2 43.1c-23.8 0-43.2-19.3-43.2-43.1s19.4-43.1 43.2-43.1zm-215.9 86.2c-23.8 0-43.2-19.3-43.2-43.1s19.3-43.1 43.2-43.1 43.2 19.3 43.2 43.1-19.4 43.1-43.2 43.1zm586.8 415.6c56.9-41.2 93.2-102 93.2-169.7 0-124-120.8-224.5-269.9-224.5-149 0-269.9 100.5-269.9 224.5S540.9 847.5 690 847.5c30.8 0 60.6-4.4 88.1-12.3 2.6-.8 5.2-1.2 7.9-1.2 5.2 0 9.9 1.6 14.3 4.1l59.1 34c1.7 1 3.3 1.7 5.2 1.7a9 9 0 006.4-2.6 9 9 0 002.6-6.4c0-2.2-.9-4.4-1.4-6.6-.3-1.2-7.6-28.3-12.2-45.3-.5-1.9-.9-3.8-.9-5.7.1-5.9 3.1-11.2 7.6-14.5zM600.2 587.2c-19.9 0-36-16.1-36-35.9 0-19.8 16.1-35.9 36-35.9s36 16.1 36 35.9c0 19.8-16.2 35.9-36 35.9zm179.9 0c-19.9 0-36-16.1-36-35.9 0-19.8 16.1-35.9 36-35.9s36 16.1 36 35.9a36.08 36.08 0 01-36 35.9z">
              </path>
            </svg>
          </span>
          {{ pageInfo.wx }}
          <span role="img" aria-label="qq" class="anticon anticon-qq"
            style="font-size: 30px; color: rgb(76, 184, 237);margin:0 20px;"><svg viewBox="64 64 896 896"
              focusable="false" data-icon="qq" width="1em" height="1em" fill="currentColor" aria-hidden="true">
              <path
                d="M824.8 613.2c-16-51.4-34.4-94.6-62.7-165.3C766.5 262.2 689.3 112 511.5 112 331.7 112 256.2 265.2 261 447.9c-28.4 70.8-46.7 113.7-62.7 165.3-34 109.5-23 154.8-14.6 155.8 18 2.2 70.1-82.4 70.1-82.4 0 49 25.2 112.9 79.8 159-26.4 8.1-85.7 29.9-71.6 53.8 11.4 19.3 196.2 12.3 249.5 6.3 53.3 6 238.1 13 249.5-6.3 14.1-23.8-45.3-45.7-71.6-53.8 54.6-46.2 79.8-110.1 79.8-159 0 0 52.1 84.6 70.1 82.4 8.5-1.1 19.5-46.4-14.5-155.8z">
              </path>
            </svg>
          </span>
          {{ pageInfo.qq }}
        </div>
      </div>
    </div>
    <!-- 图片+小人 -->
    <div class="wrapper">
      <div class="parallax-img">
        <div class="x0 x1 x2 x3 ">
          <div style="transition: width 150ms linear 0s; height: 31.425px; width: 300px;">
            <div class="x1 x4 x5 x6" style="opacity: 1; transform: translateY(0px); position: absolute;">
            </div>
          </div>
        </div>
      </div>
      <div class="r">
        <img src="@/assets/static/img/r.gif">
      </div>
    </div>
    <!-- 水平线 -->
    <div class="hr"></div>
    <!-- 我的笔记 -->
    <div class="mynote">
      <div class="w">
        <h4>我的笔记</h4>
        <p>记录工作学习中的点滴</p>
      </div>
    </div>
    <!-- 文章列表 -->
    <div class="list">
      <div class="w">
        <div class="li" v-for="(item, index) in articleData" :key="index" @click="goArticle(item.article_id)">
          <div class="imgbox">
            <img ref="img" :src="item.imgUrl">
          </div>
          <div class="box">
            <h5>{{ item.title }}</h5>
            <p>{{ item.intro }}</p>
            <!-- <span>标签 : Vue.js</span> -->
          </div>
          <div class="option">
            <ul>
              <li>
                <span role="img" aria-label="field-time" class="anticon anticon-field-time"
                  style="height: 15.5px; font-size: 14px; color: rgb(135, 232, 222); margin-right: 10px;">
                  <svg style="width: 15.5px;height: 15.5px;" class="icon" aria-hidden="true">
                    <use xlink:href="#icon-yanjing-"></use>
                  </svg>
                </span>
                {{ item.pageview }}
              </li>
              <li>
                <span role="img" aria-label="field-time" class="anticon anticon-field-time"
                  style="height: 15.5px; font-size: 14px; color: rgb(135, 232, 222); margin-right: 10px;">
                  <svg style="width: 15.5px;height: 15.5px;" class="icon" aria-hidden="true">
                    <use xlink:href="#icon-pinglun"></use>
                  </svg>
                </span>
                {{ item.commonts }}
              </li>
              <li>
                <span role="img" aria-label="field-time" class="anticon anticon-field-time"
                  style="height: 15.5px; font-size: 14px; color: rgb(135, 232, 222); margin-right: 4px;"><svg
                    viewBox="64 64 896 896" focusable="false" data-icon="field-time" width="1em" height="1em"
                    fill="currentColor" aria-hidden="true">
                    <defs>

                    </defs>
                    <path
                      d="M945 412H689c-4.4 0-8 3.6-8 8v48c0 4.4 3.6 8 8 8h256c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8zM811 548H689c-4.4 0-8 3.6-8 8v48c0 4.4 3.6 8 8 8h122c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8zM477.3 322.5H434c-6.2 0-11.2 5-11.2 11.2v248c0 3.6 1.7 6.9 4.6 9l148.9 108.6c5 3.6 12 2.6 15.6-2.4l25.7-35.1v-.1c3.6-5 2.5-12-2.5-15.6l-126.7-91.6V333.7c.1-6.2-5-11.2-11.1-11.2z">
                    </path>
                    <path
                      d="M804.8 673.9H747c-5.6 0-10.9 2.9-13.9 7.7a321 321 0 01-44.5 55.7 317.17 317.17 0 01-101.3 68.3c-39.3 16.6-81 25-124 25-43.1 0-84.8-8.4-124-25-37.9-16-72-39-101.3-68.3s-52.3-63.4-68.3-101.3c-16.6-39.2-25-80.9-25-124 0-43.1 8.4-84.7 25-124 16-37.9 39-72 68.3-101.3 29.3-29.3 63.4-52.3 101.3-68.3 39.2-16.6 81-25 124-25 43.1 0 84.8 8.4 124 25 37.9 16 72 39 101.3 68.3a321 321 0 0144.5 55.7c3 4.8 8.3 7.7 13.9 7.7h57.8c6.9 0 11.3-7.2 8.2-13.3-65.2-129.7-197.4-214-345-215.7-216.1-2.7-395.6 174.2-396 390.1C71.6 727.5 246.9 903 463.2 903c149.5 0 283.9-84.6 349.8-215.8a9.18 9.18 0 00-8.2-13.3z">
                    </path>
                  </svg>
                </span>
                {{ item.date ? $moment(item.date, 'YY-MM-DD') : '' }}
              </li>
            </ul>
          </div>
        </div>
      </div>
      <!-- 查看更多 -->
      <div @click="getMore" class="more">
        {{ disDown ? '没有更多啦~' : '查看更多' }}
      </div>
    </div>
  </div>
</template>

<script>
import "@/assets/static/js/swiper";
import { getArticle } from "@/api/index";
import axios from "axios";
export default {
  data() {
    return {
      swiperConfig: {
        slidesPerView: 2,
        spaceBetween: 30,
        prevButton: '.swiper-button-prev',
        nextButton: '.swiper-button-next',
        loop: true,
      },
      pageInfo: {
        short: '',
        technology: '',
        intro: '',
        qq: '',
        wx: '',
      },
      pagenum: 1,
      articleData: [],
      disDown: false,
      // imgsrc: 'https://api.vvhan.com/api/view?tempid=',
      // imgsrc: 'https://api.dujin.org/pic/fengjing?tempid='
      // imgsrc: 'https://tuapi.eees.cc/api.php?category=fengjing&tempid=',
      // imgsrc: 'https://api.ixiaowai.cn/gqapi/gqapi.php?tempid=',
      // imgsrc: 'https://api.dujin.org/pic/fengjing?tempid=',
      imgsrc: 'https://api.7585.net.cn/360/api.php?id=36&tempid=',
      
      timeout: null,
      timer: null
    }
  },
  mounted() {
    this.getArticleInfo()
    // 开启定时器
    this.timeout = setInterval(() => {
      this.$refs.img.forEach((item, index) => {
        if (!item.complete) {
          item.src = this.imgsrc + Math.random()
        }
      })
    }, 10000);
    // 一直请求 等待资源
    this.timer = setInterval(() => {
      if (this.$store.state.pageInfo) {
        for (const key in this.pageInfo) {
          this.pageInfo[key] = this.$store.state.pageInfo[key]
        }
        // 随机首页短句
        this.pageInfo.short = this.pageInfo.short.home_short[Math.floor(Math.random() * this.pageInfo.short.home_short.length)]
        this.$nextTick(() => {
          new Swiper(this.$refs.bigswiper, this.swiperConfig);
        })
        clearTimeout(this.timer)
      }
    }, 100);
  },
  destroyed() {
    this.timeout = null
  },
  methods: {
    // 跳转
    goArticle(id) {
      this.$router.push(`/detail/${id}`)
    },
    // 获取文章信息
    getArticleInfo() {
      const pagesize = 4
      getArticle({ type: 0, pagesize: pagesize, pagenum: this.pagenum }).then(res => {
        if (res.data.status) {
          //处理接口图
          res.data.results.forEach((item) => {
            item.imgUrl = this.imgsrc + Math.random()
          })
          this.articleData = [...this.articleData, ...res.data.results]
          if (res.data.results.length < 4) {
            this.disDown = true
          }
          this.pagenum++
        } else {
          this.disDown = true
        }
      })
    },
    // 加载更多
    getMore() {
      if (!this.disDown) {
        this.getArticleInfo()
      }
    }
  }

}
</script>

<style src="./index.less" lang="less"  scoped>
.hr {
  width: 100%;
  height: 1px;
  background-color: #eee;
}
</style>
<style lang="less">
@import url('@/assets/static/js/swiper.css');

.swiper-container {
  width: 100%;
  height: 100%;
}

.mySwiper:hover .swiper-button-prev {
  display: flex;
}


.mySwiper:hover .swiper-button-next {
  display: flex;

}


.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;

  /* Center slide text vertically */
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}

.swiper-button-prev {
  left: -30px;
}

.swiper-button-next {
  right: -30px;
}

.swiper-button-prev,
.swiper-button-next {
  color: #fff;
  // left: 0px;
  display: none;
  // display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  background-image: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.3);
}
</style>
